<template>
    <div class="Information clearfix">
        <div class="Information-list clearfix" v-if="type!==1">
            <p>资讯</p>
            <ul>
                <li class="clearfix">
                    <img src="../../assets/meirong1.jpg" alt="">
                    <div class="text  clearfix">
                        <h1>【群英汇聚】上海傲诺拉手术技术论坛今日在上海时光隆重举行</h1>
                        <p>今日，由全球著名跨国医疗美容公司美国强生公司、上海时光整形外科医院联合主办的史上至大规史上至大规 模、至高规格美胸盛会2017上海傲诺拉手术技术论坛于上海时光整形上海时光整形何金龙签到入场.....</p>
                        <div class="time" :style="{'margin-top':(width-143)+'px'}">
                            <span>2017-09-15</span>
                            <span style="margin: 0 30px">浏览量：16452</span>
                            <span>评论：1168</span>
                            <span>了解详情</span>
                        </div>

                    </div>
                </li>
                <li class="clearfix">
                    <img src="../../assets/meirong1.jpg" alt="">
                    <div class="text clearfix">
                        <h1>【群英汇聚】上海傲诺拉手术技术论坛今日在上海时光隆重举行</h1>
                        <p>今日，由全球著名跨国医疗美容公司美国强生公司、上海时光整形外科医院联合主办的史上至大规史上至大规 模、至高规格美胸盛会2017上海傲诺拉手术技术论坛于上海时光整形上海时光整形何金龙签到入场.....</p>
                        <div class="time" :style="{'margin-top':(width-143)+'px'}">
                            <span>2017-09-15</span>
                            <span style="margin: 0 30px">浏览量：16452</span>
                            <span>评论：1168</span>
                            <span>了解详情</span>
                        </div>

                    </div>
                </li>
            </ul>
        </div>
        <div class="album">
            <div class="album-title clearfix">
                <span>资讯</span>
                <ul>
                    <li class="active">全部</li>
                    <li>荣誉</li>
                    <li>资质</li>
                </ul>
            </div>
            <ul>
                <li :style="{'width':width+'px'}">
                    <img src="../../assets/meirong1.jpg" alt="">
                    <p>接待区</p>
                </li>
                <li :style="{'width':width+'px'}">
                    <img src="../../assets/meirong1.jpg" alt="">
                    <p>接待区</p>
                </li>
                <li :style="{'width':width+'px'}">
                    <img src="../../assets/meirong1.jpg" alt="">
                    <p>接待区</p>
                </li>
                <li :style="{'width':width+'px'}">
                    <img src="../../assets/meirong1.jpg" alt="">
                    <p>接待区</p>
                </li>
                <li :style="{'width':width+'px'}">
                    <img src="../../assets/meirong1.jpg" alt="">
                    <p>接待区</p>
                </li>
                <li :style="{'width':width+'px'}">
                    <img src="../../assets/meirong1.jpg" alt="">
                    <p>接待区</p>
                </li>
            </ul>

        </div>
    </div>

</template>

<script>
    export default {
        name: "InformationList",
        props:['width','type']
    }
</script>

<style scoped lang="less">
    @import "../../style/style";
.Information-list{
    >:first-child{
        font-size: 18px;
        color: @theme-color-dark;
        border-bottom: 1px solid @theme-color-dark;
        padding-bottom: 10px;
    }
    ul{
        li:hover h1{
            color: @theme-color-dark !important;
        }
        li:hover .time>:last-child{
            border: solid 1px @theme-color-dark !important;
            color:@theme-color-dark ;
        }
        li{
            height: 170px;
            border-bottom: 1px dashed #cccccc;
            padding: 20px 0;
            cursor: pointer;
            img{
                width:24%;
                height: 131px;
                float: left;
            }
            .text{
                margin-left: 20px;
                float: left;
                width: 72%;
                h1{
                    font-size: 18px;
                    color: #333333;
                    padding-bottom: 15px;
                }
                p{
                    font-size: 14px;
                    color: #999999;
                    height: 40px;
                    overflow: hidden;
                    text-overflow:ellipsis;
                    word-break: break-all;
                    display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
                    -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
                    -webkit-line-clamp: 2; /** 显示的行数 **/
                    /*margin-bottom: 10px;*/

                }
            }
            .time{
                margin-top: 30px;
                >:last-child{
                    float: right;
                    background-color: #ffffff;
                    border-radius: 14px;
                    border: solid 1px #e0e0e0;
                    padding: 5px 18px;
                    font-size: 14px;
                    color: #666666;
                    margin-top: -8px;
                }
                span{
                    font-size: 14px;
                    color: #999999;
                }
            }
        }
    }
}
    .album{
        >ul{
            >:nth-child(4n+4){
                margin-right: 0px;
            }
            li{
                width: 216px;
                margin-top: 20px;
                float: left;
                margin-right: 8px;
                cursor: pointer;
                img{
                    width: 100%;
                    height: 146px;
                }
                p{
                    font-size: 14px;
                    color: #666666;
                    text-align: center;
                }
            }
        }
        .album-title{
            padding-bottom: 10px;
            padding-top: 10px;
            border-bottom: 1px solid @theme-color-dark;
            >span{
                font-size: 18px;
                color: #ff536f;
                float: left;
            }
            >ul{
                float: left;
                .active{
                    background-color: #ff5371;
                    color: white;
                }
                li{
                    cursor: pointer;
                    float: left;
                    width: 58px;
                    height: 18px;
                    line-height: 18px;
                    border-radius: 2px;
                    margin-left: 40px;
                    font-size: 14px;
                    color: #666666;
                    text-align: center;
                    margin-top:5px;
                }
            }
        }
    }
</style>